.post {
  .head {
    position: relative;
    height: 75vw;

    .cover {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      border-style: none;
    }

    .mask {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.75));
      padding: 30px;
      color: $color-white;

      .title {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
      }

      .info {
        display: flex;
        align-items: center;
        font-size: 0.85rem;

        .info-item {
          display: flex;
          align-items: center;
          margin-right: 20px;
        }
      }
    }
  }

  .content {
    padding: 30px;
    color: $color-middle;
    line-height: 2;
    font-size: 0.85em;

    @for $i from 1 through 6 {
      .h#{$i} {
        font-size: 1.6 - $i * 0.1rem;
        margin-bottom: 1rem;
        margin-top: 2rem;
        color: $color-default;
        font-weight: bold;
      }
    }

    .img {
      display: block;
      width: 100%;
      margin: 0 auto;
    }

    .p,
    .li {
      .code {
        background-color: $color-background-deep;
        padding: 2px 5px;
        border-radius: 2px;
        color: $color-link;
      }
    }

    .a {
      text-decoration: underline;
    }

    .ul {
      padding-left: 1.2em;

      .li {
        display: list-item;
        list-style-type: disc;
      }
    }

    .ol {
      padding-left: 1.2em;

      .li {
        display: list-item;
        list-style-type: decimal;
      }
    }

    .strong {
      font-weight: bold;
    }

    .em {
      font-style: italic;
    }

    .u {
      text-decoration: underline;
    }

    .del {
      text-decoration: line-through;
    }

    .kbd {
      padding: 0.2em 0.4em;
      font-size: 87.5%;
      color: $color-background;
      background-color: $color-default;
      border-radius: 0.2em;
    }

    .table {
      margin: 10px auto;
      min-width: 100%;
      text-align: center;
    }

    .table,
    .table .td,
    .table .th {
      border: 1px solid $color-default;
      border-collapse: collapse;
      padding: 5px;
    }

    .figure {
      color: $color-default;
      margin: 0;
      overflow: auto;
      margin-bottom: 20px;

      .table {
        border: none;

        .td {
          padding: 0;

          &.gutter {
            display: none;
          }

          &.code {
            background-color: $color-background-deep;
            padding: 1em;
            border: none;
          }

          .table,
          .pre {
            margin: 0;
            text-align: left;
            border: 0;
          }
        }
      }
    }

    .blockquote {
      margin: 0.85em 0;
      padding: 15px 20px;
      background-color: $color-background-deep;
      border-left: 4px solid $color-link;

      .p {
        margin: 0;
      }
    }

    .image-caption {
      display: block;
      margin: 10px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}
